{include file='common/head' /}
<!--多图上传样式-->
<link rel="stylesheet" href="__UPLOAD__/control/css/zyUpload.css" type="text/css">
<!-- 引用控制层插件样式 -->
<link rel="stylesheet" href="__UPLOAD__/control/css/zyUpload.css" type="text/css">
<script src="__UPLOAD__/jquery-1.10.2.min.js"></script>
<!-- 引用核心层插件 -->
<script type="text/javascript" src="__UPLOAD__/core/zyFile.js"></script>
<!-- 引用控制层插件 -->
<script type="text/javascript" src="__UPLOAD__/control/js/zyUpload.js"></script>
<!-- 引用初始化JS -->
<!--<script type="text/javascript" src="demo.js"></script>-->
<script type="text/javascript" src="__UPLOAD__/control/js/jqueryrotate.js"></script>
<script type="text/javascript" src="__UPLOAD__/index.js"></script>

<!-- 表情开始 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Begin emoji-picker Stylesheets -->
<link href="__PLURING__/emoji/lib/css/nanoscroller.css" rel="stylesheet">
<link href="__PLURING__/emoji/lib/css/emoji.css" rel="stylesheet">
<!-- End emoji-picker Stylesheets -->
<!-- 表情结束 -->

    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                    <input type="hidden" name="cover" id="cover" value="{$data.cover|default=''}">
                    <input type="hidden" name="id"  value="{$data.id|default=0}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            选择商品
                        </label>
                        <div class="layui-col-md6">
                            <input type="text" name="goods_id" value="{$data.goods_id|default=''}" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            填写商品ID
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            选择会员
                        </label>
                        <div class="layui-col-md6">
                            <input type="text" name="uid" autocomplete="off" class="layui-input" value="{$data.uid|default=''}">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            填写会员ID
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            评分等级
                        </label>
                        <div class="layui-col-md6">
                            <div id="rote-level"></div>
                            <input type="hidden"  name="level" autocomplete="off" class="layui-input" value="{$data.level|default=3}">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            评分等级，值取1-5
                        </div>
                    </div>
                    <style>
                        .emoji-wysiwyg-editor.layui-textarea {
                            height:100px;
                        }
                    </style>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            评论内容
                        </label>
                        <div class="layui-col-md6">
                            <input style="height:100px;" placeholder="请输入内容" name="discuss" class="layui-textarea" value="{$data.discuss|default=''}" data-emojiable="true"/>
                        </div>
                    </div>

                    <!-- 评论图片 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            评论图片
                        </label>
                        <div class="layui-col-md9">
                            <div id="bannerListImgs">
                                <div>
                                    <input name="bannerDataImgs" type="hidden" value="{$data.cover|default=''}"/>
                                    <!-- 添加 -->
                                    <button title="添加新的轮播图-推荐" style="position: relative;" type="button" class="layui-btn layui-btn-normal">
                                        <input style="cursor: pointer;height:100%;width:100%;position: absolute;top:0;left:0;opacity: 0;" id="bannerImgs_data_push" type="file" size="30" name="bannerImgs_data_push" value="添加图片" multiple=true/>
                                        <i class="layui-icon layui-icon-praise"></i>
                                        添加上传
                                    </button>
                                    <!-- 替换 -->
                                    <button title="替换会删除原有的轮播图-不推荐" style="position: relative;" type="button" class="layui-btn layui-btn-warm">
                                        <input style="cursor: pointer;height:100%;width:100%;position: absolute;top:0;left:0;opacity: 0;" id="bannerImgs_data" type="file" size="30" name="bannerImgs_data[]" value="替换图片" multiple=true/>
                                        <i class="layui-icon layui-icon-upload-circle"></i>
                                        替换上传
                                    </button>
                                    <!-- 批量删除 -->
                                    <button title="直接清空当前轮播图" type="button" onclick='bannerDelAll()' class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"></i>清空</button>
                                    <table class="layui-table">
                                        <thead>
                                            <th>图片</th>
                                            <th>操作</th>
                                        </thead>
                                        <tbody id="bannerListImgs-tbody">
                                            {if isset($data.cover) && strlen($data.cover) > 5 && $imgs && is_array($imgs)}
                                            {volist name="imgs" id="v"}
                                            <tr data-name="{$v}">
                                                <td> <img style="cursor: pointer;" title="点我预览图片" data-src="{$v}" onclick="lookImg('{$v}','商品-轮播图',this)" style="width:150px;"  src="{$v}" /></td>
                                                <td>
                                                    <button title="替换图片" style="position: relative;" type="button" class="layui-btn layui-btn-normal">
                                                        <input style="cursor: pointer;height:100%;width:100%;position: absolute;top:0;left:0;opacity: 0;" class="bannerList_tiHuan" type="file" size="30" name="bannerImgs_data_push" value="添加图片" multiple=true/>
                                                        <i class="layui-icon layui-icon-edit"></i>替换
                                                    </button>
                                                    <button title="向上排序" type="button" class="layui-btn layui-btn-warm layui-btn- layui-btn-xs" onclick="bannerViewValueSort(this,true)"><i class="layui-icon layui-icon-up"></i>&nbsp;向上</button>
                                                    <button title="向下排序" type="button" class="layui-btn layui-btn-warm layui-btn- layui-btn-xs" onclick="bannerViewValueSort(this,false)"><i class="layui-icon layui-icon-down"></i>&nbsp;向下</button>
                                                    <button title="删除" type="button" class="layui-btn layui-btn-danger layui-btn- layui-btn-xs" onclick="bannerViewdel(this)"><i class="layui-icon layui-icon-delete"></i>&nbsp;删除</button>
                                                </td>
                                            </tr>
                                            {/volist}
                                            {/if}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="layui-form-item">
                        <label class="layui-form-label">
                            评论图片
                        </label>
                        <div class="layui-col-md9">
                            <div id="demo" class="demo" style="width: 650px; height: 400px;">
                            </div>
                        </div>
                    </div> -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">回复内容</label>
                        <div class="layui-col-md9">
                            <input style="height:100px;" placeholder="请输入内容" name="reply" class="layui-textarea" value="{$data.reply|default=''}" data-emojiable="true"/>
                        </div>
                    </div>

                    <!-- 表情开始--- -->
                    <script src="__PLURING__/jq.js"></script>
                    <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
                    <!-- Begin emoji-picker JavaScript -->
                    <script src="__PLURING__/emoji/lib/js/nanoscroller.min.js"></script>
                    <script src="__PLURING__/emoji/lib/js/tether.min.js"></script>
                    <script src="__PLURING__/emoji/lib/js/config.js"></script>
                    <script src="__PLURING__/emoji/lib/js/util.js"></script>
                    <script src="__PLURING__/emoji/lib/js/jquery.emojiarea.js"></script>
                    <script src="__PLURING__/emoji/lib/js/emoji-picker.js"></script>
                    <!-- End emoji-picker JavaScript -->
                    <script>
                    $(function() {
                      // Initializes and creates emoji set from sprite sheet
                      window.emojiPicker = new EmojiPicker({
                        emojiable_selector: '[data-emojiable=true]',
                        assetsPath: '/static/pluring/emoji/lib/img/',
                        popupButtonClasses: 'fa fa-smile-o'
                      });
                      // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
                      // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
                      // It can be called as many times as necessary; previously converted input fields will not be converted again
                      window.emojiPicker.discover();
                    });
                      </script>
                    <!-- 表情结束--- -->

                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-col-md9">
                            <input type="number" name="sort" value="{$data.sort|default=0}" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            是否显示
                        </label>
                        <div class="layui-input-inline">
                            {if empty($data['is_display'])}
                            <input type="radio" name="is_display" value="1" title="是">
                            <input type="radio" name="is_display" value="0" title="否" checked>
                            {else /}
                            <input type="radio" name="is_display" value="1" title="是" {if $data['is_display'] == 1}checked{/if}>
                            <input type="radio" name="is_display" value="0" title="否" {if $data['is_display'] == 0}checked{/if}>
                            {/if}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            匿名
                        </label>
                        <div class="layui-input-inline">
                            {if empty($data['is_anonymous'])}
                            <input type="radio" name="is_anonymous" value="1" title="是">
                            <input type="radio" name="is_anonymous" value="0" title="否" checked >
                            {else /}
                            <input type="radio" name="is_anonymous" value="1" title="是" {if $data['is_anonymous'] == 1}checked{/if}>
                            <input type="radio" name="is_anonymous" value="0" title="否" {if $data['is_anonymous'] == 0}checked{/if}>
                            {/if}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="add" lay-submit="">确定保存</button></div>
                </form>
            </div>
        </div>
        <script>
            var level = {$data.level|default=0};
            var reply = "<?php echo isset($data) && isset($data->discuss) && $data->discuss ? $data->discuss : '' ?>";
        </script>
        <script>
            layui.use(['form', 'layer','jquery','rate'],function() {

                reply && $("textarea").val(reply)
                $ = layui.jquery;
                var form = layui.form,layer = layui.layer;
                var rate = layui.rate;

                //显示文字
                rate.render({
                    elem: '#rote-level'
                    ,value: level
                    ,text: true //开启文本
                });

                //监听提交
                form.on('submit(add)', function(data) {
                    var bannerImgStr =  bannerGetImgs()
                    // if(!bannerImgStr){
                    //     layer.msg('请上传轮播图',{icon:5})
                    //     return false;
                    // }
                    data.field.bannerImgStr = bannerImgStr
                    $.ajax({
                        url:"{:url('Product/comment_add')}",
                        type: "post",
                        data:data.field,
                        dataType:"json",
                        success:function (res) {
                            if(res.code == 200){
                                layer.alert(res.msg, {icon: 1},function () {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                            }else{
                                layer.alert(res.msg, {icon:2,time:1000});
                            }
                        },
                        error:function(e){
                            layer.alert("网络错误", {icon:5,time:1000});
                        },
                    });
                    return false;
                });
            });


            window.onload = function(){
                $("#rote-level ul > li").click(function(){
                    $("input[name=level]").val($("#rote-level > span").text()[0] - 0)
                })
            }
        </script>


<script>
    // 存储信息
    var bannerFilesObj = [];
    // 绑定事件-替换
    $("#bannerImgs_data").change(function(){
        var files = document.querySelector("input[name='bannerImgs_data[]']").files
        if(!files || files.length == 0) return layer.msg('请选择文件',{icon: 5})
        var form  = new FormData();
        form.append('prefix','goods_comment');
        for(var i = 0; i < files.length;i++){
            bannerFilesObj.push({
                size: files[i].size / 1024 + 'KB',
                type: files[i].type,
                name: files[i].name
            })
            form.append('file[]',files[i]);
        }
        uploadsImgsMores(form);
    })
    // 添加 - 图片
    $("#bannerImgs_data_push").change(function(){
        var files = document.querySelector("input[name='bannerImgs_data_push']").files
        if(!files || files.length == 0) return layer.msg('请选择文件',{icon: 5})
        var form  = new FormData();
        form.append('prefix','goods_comment');
        for(var i = 0; i < files.length;i++){
            bannerFilesObj.push({
                size: files[i].size / 1024 + 'KB',
                type: files[i].type,
                name: files[i].name
            })
            form.append('file[]',files[i]);
        }
        uploadsImgsMores(form,true);
    })

    // ajax 多文件请求
    function uploadsImgsMores(data,bool = false){
        $.ajax({
            url: '/admin/Uploads/uploadsImgs',    
            type: 'post',
            data,
            dataType : "json",
            async: true, // 是否异步
            processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            contentType: false, //
            success:function(res){
                if(res.code && res.code == 200 && res.data){
                    bannerView(res.data,bool)
                }
                layer.msg(res.msg || '操作ok',{icon: res.code == 200 ? 6 :5 })
            }
        })
    }


    // 渲染
    function bannerView(data,bool){
        if(!data || data.length == 0) return false;
        var html = ``;
        var sval = '';
        for(var i = 0; i < data.length;i++){
            sval +=  data[i].url + (i == data.length - 1  ? '' : ',');
            html += `
                <tr data-name="${data[i].url}">
                    <td> <img style="cursor: pointer;" title="点我预览图片" data-src="${decodeURIComponent(data[i].url)}" onclick="lookImg('${decodeURIComponent(data[i].url)}','商品-轮播图',this)" style="width:150px;"  src="${data[i].url}" /></td>
                    <td>
                        <button title="替换图片" style="position: relative;" type="button" class="layui-btn layui-btn-normal">
                            <input style="cursor: pointer;height:100%;width:100%;position: absolute;top:0;left:0;opacity: 0;" class="bannerList_tiHuan" type="file" size="30" name="bannerImgs_data_push" value="添加图片" multiple=true/>
                            <i class="layui-icon layui-icon-edit"></i>替换
                        </button>
                        <button title="向上排序" type="button" class="layui-btn layui-btn-warm layui-btn- layui-btn-xs" onclick="bannerViewValueSort(this,true)"><i class="layui-icon layui-icon-up"></i>&nbsp;向上</button>
                        <button title="向下排序" type="button" class="layui-btn layui-btn-warm layui-btn- layui-btn-xs" onclick="bannerViewValueSort(this,false)"><i class="layui-icon layui-icon-down"></i>&nbsp;向下</button>
                        <button title="删除" type="button" class="layui-btn layui-btn-danger layui-btn- layui-btn-xs" onclick="bannerViewdel(this)"><i class="layui-icon layui-icon-delete"></i>&nbsp;删除</button>
                    </td>
                </tr>
            `;
        }
        if(!bool){
            $("#bannerListImgs tbody").css('display','none').html(html)
            $("#bannerListImgs tbody").show(600); 
        }else{
            var htmlTr = $("#bannerListImgs tbody").css('display','none').html()
            $("#bannerListImgs tbody").html(htmlTr + html).show(600); 
        }
        setTimeout(function(){
            bannerList_TiHuanBtn()
        },500)
        $("input[name='bannerDataImgs']").val(sval)
    }

    // 向上 或者向下
    function bannerViewValueSort(self,bool){
        // 开始演员
        var f = $(self).parents('tr');
        var tit = ''
        var list = $("#bannerListImgs-tbody tr")
        var fname = $(f).attr('data-name')
        // 向上
        if(bool){
            if(!(list.length <= 2 || $(list[0]).attr('data-name') != fname))
                tit = '-已在最后面'
            $(f).hide(500,function() {
                setTimeout(function () {
                    if (tit.length == 0) {
                        $(f).show(500)
                        return $(f).prev().insertAfter(f);
                    }
                    var html = $(f).html();$(f).remove()
                    $("#bannerListImgs-tbody").append('<tr data-name="' +fname+'">' + html + '</tr>')
                },500)
            })
        // 向下
        }else{
            if(!(list.length <= 2 || $(list[list.length - 1]).attr('data-name') != fname))
                tit = '-已在最前面'
            $(f).hide(500,function() {
                setTimeout(function () {
                    if (tit.length == 0) {
                        $(f).show(500)
                        return $(f).next().insertBefore(f);
                    }
                    var html = $(f).html();$(f).remove()
                    $("#bannerListImgs-tbody").prepend('<tr data-name="' +fname+'">' + html + '</tr>')
                }, 500)
            })
        }
        layer.msg('切换顺序-' +  (bool ? ' 向上移动ok' : ' 向下移动ok')+tit,{icon:6})
    }

    // 删除
    function  bannerViewdel(self){
        layer.confirm('确定删除此图片?',{
            icon:4,
            title:'轮播图-删除'
        },function(index){
            $(self).parents('tr').remove();
            layer.msg('删除ok',{icon:6})
            layer.close(index)
        })
    }

    // 拿取到 图片数据
    function bannerGetImgs(){
        var imgs =  $("#bannerListImgs-tbody").find('img')
        if(!imgs || imgs.length == 0) return false;
        var s = '';
        for(var i = 0; i < imgs.length;i++){
            s += $(imgs[i]).attr('data-src') + (i == imgs.length - 1 ? '' : ',')
        }
        return s;
    }


    // 点我清空数据
function bannerDelAll(){
layer.confirm('是否清除当前轮播图数据?',{title:'轮播图操作',icon:3},function(index){
    layer.close(index)
    layer.msg('清除轮播图成功',{icon:6})
    $("#bannerListImgs-tbody").hide(300,function(){
        $("#bannerListImgs-tbody").html("")
    })
})
}

// 绑定事件
function bannerList_TiHuanBtn(){
                    $(".bannerList_tiHuan").off('change')
                    $(".bannerList_tiHuan").change(function(){
                        var f = $(this)[0].files
                        var self = this
                        if(f && f.length > 0){
                            var form = new FormData();
                            form.append('prefix','goods_banners');
                            form.append('file',f[0])
                            $.ajax({
                                url: '/admin/Uploads/uploadImg',    
                                type: 'post',
                                data: form,
                                dataType : "json",
                                async: true, // 是否异步
                                processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                                contentType: false, //
                                success:function(res){
                                    if(res.code && res.code == 200 && res.data){
                                        var url = '/' + res.data.fileName + '/' + res.data.prefix+ '/' + res.data.url.replace("\\",'/') 
                                        var fElem = $(self).parents('tr')
                                        $(fElem).find('img').attr('src',url).attr('data-src',url)
                                        $(fElem).attr('data-name',url)
                                    }
                                    layer.msg(res.msg || '操作ok',{icon: res.code == 200 ? 6 :5 })
                                }
                            })
                        }
                    })
                }
</script>
<script>
    $(function(){
        bannerList_TiHuanBtn();
    })
</script>
{include file='common/scroll' /}
{include file='common/footer' /}